<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/phone.css'}"/>
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <title>更改手机</title>
    <style>
        .sub {
            display: block;
            width: 6.3rem;
            line-height: 0.77rem;
            font-size: 0.26rem;
            color: #fff;
            background: #2d9cff;
            margin: 0 auto;
            border-radius: 0.1rem;
        }
    </style>
</head>
<body>
<header><span onclick="javascript:history.go(-1)"></span>更改手机</header>
<div style="margin-left: 75px;margin-top: 20px;">
    <!--<input id="phoneradio"  type="radio" name="phonenum" style="margin-left: -0.5rem;" checked /><span style="margin-top: -0.3rem;margin-left: 0rem;font-size: 15px;color: #2d9cff">手机接收验证码</span>-->
    <!--<input id="mailradio" type="radio" name="phonenum" style="margin-left: 30px;"/><span style="font-size: 15px;color: #2d9cff">邮箱接收验证码</span>-->
</div>
<div style="display: none" id="maildiv">
    <form action="">
        <ul>
            <li><input id="mail" type="text" name="phone" disabled th:value="${user.infoV}"/></li>
            <li><input id="yanzhengma" type="text" name="id" placeholder="请输入验证码" onblur="yanMail()"/><span class="get"
                                                                                                            onclick="sendmail()">获取验证码</span>
            </li>
            <li><input id="phone" type="text" name="phone" placeholder="请输入手机号" onblur="phoneyanzheng()"/></li>
            <li><span id="span"></span></li>
            <li><input class="sub" type="button" value="更改" onclick="updateMail()"/></li>

        </ul>
    </form>

    <input id="num" type="hidden">
</div>
<div id="phonediv">
    <form action="">
        <ul>
            <li><input id="mail1" type="text" name="phone" disabled th:value="${user.phone}"/></li>
            <li><input id="yanzhengma1" type="text" name="id" placeholder="请输入验证码" onblur="yanMail1()"/><input type="button" class="get" value="获取验证码" id="confirm" onclick="sendcode()"/></li>
            <li><input id="phone1" type="text" name="phone" placeholder="请输入手机号" onblur="phoneyanzheng()"/></li>
            <li><span id="span1"></span></li>
            <li><input class="sub" type="button" value="更改" onclick="updatePhone()"/></li>

        </ul>
    </form>

    <input id="num1" type="hidden">
</div>
<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    //改手机号时更改验证方式
    $("#phoneradio").change(function () {
        document.getElementById("phonediv").style.display = "block";
        document.getElementById("maildiv").style.display = "none";
    });
    $("#mailradio").change(function () {
        document.getElementById("phonediv").style.display = "none";
        document.getElementById("maildiv").style.display = "block";
    });


    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数



    function sendcode() {
        curCount = count;
        var span = $("#span1");

        //设置button效果，开始计时
        $("#confirm").attr("disabled", "true");
        $("#confirm").css("color", '#f6f6f6');
        $("#confirm").css("background", '#999999');
        $("#confirm").val( + curCount + "秒再获取");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        $.ajax({
            url: basePath + '/memberSendSms/sms',
            type: "get",
            dataType: "JSON",
            data: {
                PhoneNumbers: $("#mail1").val(),
                //模板码是测试用的错的，SMS_171358608是真的
                TemplateCode: "SMS_171358608",
            },
            success: function (e) {
                if (e.msg == "OK") {
                    span.html('发送成功').css('color', '#33FF00');
                    $("#num1").val(e.data);
                } else {
                    span.html('发送失败').css('color', '#ff2525');
                }

            }
        })
    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#confirm").removeAttr("disabled");//启用按钮
            $("#confirm").css("color", '#fff');
            $("#confirm").css("background", '#2d9cff');
            $("#confirm").val("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#confirm").val( + curCount + "秒再获取");
        }
    }

    function yanMail1() {
        var num = $("#num1").val();
        var inputNum = $("#yanzhengma1").val();
        if (inputNum == "") {
            flag = 2;
        } else if (num != inputNum) {
            flag = 3;
        } else {
            flag = 1;
        }
    }

    function sendmail() {
        var mail = $("#mail").val();
        $.ajax({
            url: basePath + '/memberSendMail/send',
            type: "get",
            dataType: "JSON",
            data: {
                accept: mail,
                type: '修改手机号',
                text: '您正在修改手机号码，您的验证码是：'
            },
            contentType: 'application/json;charset=UTF-8',
            //async: false,
            success: function (data) {
                if (data != null) {
                    $("#num").val(data);

                }

            }
        })
    }


    var flag = 2;

    function yanMail() {
        var num = $("#num").val();
        var namespan = $("#span");
        var inputNum = $("#yanzhengma").val();
        if (inputNum == "") {
            namespan.html('验证码不能为空').css('color', '#ff2525');
            flag = 2;
        } else if (num != inputNum) {
            flag = 3;
        } else {
            namespan.html(' ');
            flag = 1;
        }

    }

    var pflag = 2;

    //手机号码验证
    function phoneyanzheng() {
        var namespan = $("#span");
        var newphone = $("#phone").val();
        if (newphone == '') {
            namespan.html('手机号不能为空').css('color', '#ff2525');
            pflag = 2;
        } else if (!(/^1[3456789]\d{9}$/.test(newphone))) {
            namespan.html('手机号不正确').css('color', '#ff2525');
            pflag = 3;
        } else {
            namespan.html(' ');
            pflag = 1;
        }

    }

    function updateMail() {
        var phone = $("#phone").val();
        update(phone);
    }

    function updatePhone() {
        var phone = $("#phone1").val();
        update(phone);
    }

    function update(phone) {
        var namespan = $("#span");
        if (flag == 2) {
            namespan.html('验证码不能为空').css('color', '#ff2525');
        } else if (pflag == 2) {
            namespan.html('手机号不能为空').css('color', '#ff2525');
        } else if (pflag == 3) {
            namespan.html('手机号不正确').css('color', '#ff2525');
        } else if (flag == 3) {
            namespan.html('验证码不正确').css('color', '#ff2525');
        } else if (flag == 1 && pflag == 1) {
            namespan.html(' ')
            $.ajax({
                url: basePath + '/wap/memberUser/updatePhone',
                type: "get",
                dataType: "JSON",
                data: {
                    newphone: phone
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        $('body').dailog({type: 'success', title: '更改手机号', discription: '更改成功'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/personal.html";
                        }, 2000)
                    } else if (data.msg == "no") {
                        $('body').dailog({type: 'warning', title: '更改手机号', discription: '更改失败'});
                        self.setInterval(function () {
                            location.reload();
                        }, 2000)
                    }

                }
            })
        }
    }


</script>
</body>
</html>
